@charset "UTF-8";

*{
  margin: 0 0;
  padding: 0 0;
}
img{
  max-width: 100%;
}
ul{
  padding-left: 0;
  list-style: none;
}
a:hover{
  color: #07528c;
}
/*设置字体大小自适应*/
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.2rem;/*1.4 × 10px = 14px */}
body{
  line-height: 1.8;
  color: white;
  overflow-x: hidden;
  font-family: Blizzard, Arial, Helvetica, "Segoe UI Symbol", "Segoe MDL2 Assets", "Microsoft YaHei", "Hei SC", "Segoe UI Symbol", "Segoe MDL2 Assets", sans-serif;

}
.wrap{
  width: 1190px;
  margin: 0 auto;
}

/*1280分辨率以上（大于1200px）*/
@media screen and (min-width:1200px){
  #banner{ width: 1920px;margin-left: -960px}.wrap{ width: 1100px; }
  #content,#box{width: 1010px;li{width: 33.33333%;float: left}}#secondary{width:310px}
}
/*1100分辨率（大于960px，小于1199px）*/
@media screen and (min-width: 960px) and (max-width: 1199px) {
  #banner{ width: 1920px;margin-left: -960px}.wrap{ width: 1100px; }
  .wrap{ width: 960px; }#content,#box{width: 960px;li{width: 33.33333%;float: left}}#secondary{width:250px}select{max-width:200px}
}
/*880分辨率（大于768px，小于959px）*/
@media screen and (min-width: 768px) and (max-width: 959px) {
  .box-change li .bck,p{width: 260px}#logo,#banner{ width: 1000px; margin-left:-500px}.wrap{ width: 900px; }#content,#box{width: 100%;li{width: 33.33333%;float: left}}#secondary{width:220px}select{max-width:180px}
}
/*720分辨率（大于480px，小于767px）*/
@media only screen and (min-width: 480px) and (max-width: 767px){
  .box-change li .bck,p{width: 140px}#logo,{transform: scale(0.8)}#banner{ width: 500px;margin-left: -250px}.wrap{ width: 450px; }#content,#box{width: 420px;position: relative;li{width: 100%;} }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
}
/*440分辨率以下（小于479px）*/
@media only screen and (max-width: 479px) {
  .box-change li .bck,p{width:80px}#logo,.content{transform: scale(0.8)}#banner{ width: 400px;margin-left:200px }.wrap{ width: 300px; }#content,#box{width: 300px;li{width:100%;}}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
}
body:after {
  display: block;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
  content: 'Pc';
}
.wrap:before,.wrap:after{
  display: table;
  clear: both;
  content: '';
}
.wrap1:before,.wrap1:after{
  display: table;
  clear: both;
  content: '';
}
.wrap1{
  width:1366px;
  height: 100%;
  margin-left:auto;
  margin-right:auto;
}
a{
  font-family: 微软雅黑;
  color:#555;
  text-decoration: none;
  &:hover{
    color: #C40000;
    text-decoration: underline;
  }
}
div{
  display: block;
}
.clearFix:before,.clearFix:after{
  height: 0;
  width: 0;
  overflow: hidden;
  clear: both;
  content: '';
  display: block;
}
/***********************************以下是首页部分***********************************************/
body{
  background: url("../img/body.jpg")repeat-y 50% 658px;
}
.header-top{
  display: block;
  height: 622px;
  overflow: hidden;
  background: url("../img/top.jpg")no-repeat 50% top;
  .wrap{
    .header{
      display: block;
      width: 100%;
      height: 662px;
      position: relative;

    }
    #logo{
      position: absolute;
      top: -20px;
      left: 50%;
      width: 513px;
      margin-left: -270px;
      z-index: 9;
      img:first-child{
        position: absolute;
        top: 0;
        left: 50px;
      }
      img:last-child{
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
      }
      .flip {
        animation-timing-function: ease-out;
      }
      .flip.out {
        transform: rotateY(-90deg) scale(.9);
        animation-name: flipouttoleft;
        animation-duration: 275ms;
      }
      .flip.in {
        animation-name: flipintoright;
        animation-duration: 275ms;
        visibility: visible;
      }
      @keyframes flipouttoleft {
        from { transform: rotateY(0); }
        to { transform: rotateY(-90deg); }
      }
      @keyframes flipintoright {
        from { transform: rotateY(90deg); }
        to { transform: rotateY(0); }
      }
    }

  }
  #banner{
    display: block;
    position: absolute;
    top: 0;
    z-index: 0;
    object-fit: contain;
    left: 50%;
  }
}
.content{
  display: block;
  width: 100%;
  height: 300px;
  position: relative;
  top: -144px;
  background: url("../img/bottom-bar.png")no-repeat 50% 0;
  z-index: 19;
  .landing-nav{
    display: block;
    width:40%;
    height: 40%;
    position: absolute;
    left: 50%;
    margin-left: -20%;
    a{
      display: block;
      width: 66px;
      height: 66px;
      position: absolute;
      top: -120px;
      left: 50%;
      margin-left: -50px;
      background: url("../img/bar.png")no-repeat 0 0;
      background-position: -43px -43px;
    }
    #nav{
      display: block;
      position: absolute;
      top: 80px;
      left: 50%;
      margin-left: -250px;
      width: 500px;
      height: 100px;
      background: url("../img/bar.png")no-repeat 0 0;
      background-position: 18px -377px;
      .download{
        display: block;
        width: 180px;
        height: 180px;
        position: absolute;
        top: -38px;
        left: 50%;
        margin-left: -90px;
        background: url("../img/bar.png")no-repeat 0 0;
        background-position: -43px -1112px;
        span{
          display: block;
          width: 100%;
          height: 22%;
          position: absolute;
          top: 65px;

          background: url("../img/bar.png")no-repeat 0 0;
          background-position: -272px -1212px;
          text-indent: -999em;
          z-index: 12;
        }
      }
      .centerIcon{
        display: block;
        width: 283px;
        height: 276px;
        position: absolute;
        left: 50%;
        margin-left: -146px;
        top: -93px;
        background: url("../img/bar.png")no-repeat 0 0;
        background-position: -2px -758px;
        animation: rotate-centerIcon 15s 3s cubic-bezier(1,0,0,1) infinite;
        -webkit-animation: rotate-centerIcon 15s  cubic-bezier(1,0,0,1) 3s infinite;
        -moz-animation: rotate-centerIcon 15s 3s cubic-bezier(1,0,0,1) infinite;
        -o-animation: rotate-centerIcon 15s  cubic-bezier(1,0,0,1) 3s infinite;
      }
      @keyframes rotate-centerIcon {
        0% {
          transform: rotate(0deg);
        }
        6% {
          transform: rotate(-15deg);
        }
        100%, 33% {
          transform: rotate(3600deg);
        }
      }
      .left-icon{
        display: block;
        width: 100px;
        height: 50px;
        position: absolute;
        left: 120px;
        top:22px;
        background: url("../img/bar.png")no-repeat 0 0;
        background-position: -50px -506px;
        z-index: 999;
      }
      .right-icon{
        display: block;
        width: 100px;
        height: 50px;
        position: absolute;
        left: 380px;
        top:22px;
        background: url("../img/bar.png")no-repeat 0 0;
        background-position: -325px -506px;
        z-index: 999;
      }
      .icon:hover{
        transform: scale(1.05);
      }
    }
  }
  .gun-shut{
    width: 60px;
    height: 60px;
    display: block;
    position: relative;
    left: 50%;
    margin-left: 20%;
    top: 150px;
    background:url("../img/bar.png")no-repeat 0 0;
    background-position: -78px -1366px;
  }
}
.box{
  display: block;
  height: auto;
  margin: 0 auto;
  position: relative;
  top: -170px;
  ul{
    display: block;
    width: 100%;
    height: auto;
  }
  li{
    display: block;
    height: auto;
    a{
      display: block;
      width: 100%;
      margin: 0 auto;
      height: 100%;
      text-decoration: none;
      .bck{
       display: block;
        width: 317px;
        height: 205px;
        margin: 0 auto;
        text-align: center;
        padding-top: 10px;

        background: url("../img/box-shadow.png")no-repeat 3px 0px;
        background-position: -12px 0px;
        img{
          display: inline-block;
          }
      }
      p{
        display: block;
        width: 317px;
        height: 90px;
        margin: 0 auto;
        padding: 0;
        background: url("../img/bck.png")no-repeat 0px -17px;
        background-position: -10px -17px;
        color: #821a0b;
        font-size: 21px;
        font-weight: 700;
        text-shadow: 0 0 1px #ffd99b;
        text-align: center;
        line-height: 70px;
      }

    }
    a:hover p{
      color: #821a0b;
    }
  }
}
.box-change{
  display: block;
  height: auto;
  margin: 0 auto;
  position: fixed;
  bottom: -18px;
  z-index: 999;
  left:0px;
  right:0px;
  ul{
    display: block;
    width: 100%;
    height: auto;
  }
  li{
    display: block;
    float: left;
    position: relative;
    a{
      display: block;
      width: 100%;
      margin: 0 auto;
      height: 100%;
      text-decoration: none;
      .bck{
        display: block;
        width: 317px;
        height: 0;
        margin: 0 auto;
        text-align: center;
        padding-top: 10px;
        position: absolute;
        bottom: 88px;
        left: 11px;

        background: url("../img/box-shadow.png")no-repeat 3px 0px;
        background-position: -12px 0px;
        transition: height .4s ease 0s;
        overflow: hidden;
        img{
          display: inline-block;
        }
      }
      p{
        display: block;
        width: 317px;
        height: 90px;
        margin: 0 auto;
        padding: 0;
        position: relative;
        background: url("../img/bck.png")no-repeat 0px -17px;
        background-position: -10px -17px;
        color: #821a0b;
        font-size: 21px;
        font-weight: 700;
        text-shadow: 0 0 1px #ffd99b;
        text-align: center;
        line-height: 70px;
      }

    }
    a:hover .bck{
      height: 205px;
      transition: height .4s ease 0s;
     }
    a:hover p{
      color: #821a0b;
    }
  }
}
#popBox{
  display:none;
  width: 100%;
  height: auto;
  position:absolute;
  top: 0;
  left: 0;
  z-index:999999;
  .lightbox-container{
    display: block;
    width: 1000px;
    height: 630px;
    z-index:999999;
    margin: 40px auto 0;
    position: relative;
    background: rgba(12,12,12,0.9);
    .top-wood{
      display: block;
      width: 990px;
      height: 26px;
      background: url("../img/headerwood.jpg")no-repeat 10px 0;
      background-size:100% 100% ;
    }
    .bottom-wood{
      display: block;
      width: 980px;
      height: 47px;
      background: url("../img/bottomwood.jpg")no-repeat 10px 0;
      background-size:100% 100% ;

    }
    .top-bar{
      width: 980px;
      height: 18px;
      display: block;
      background: url("../img/topbar.png")50% 0 repeat-x;
    }
    .left-bar{
      width: 18px;
      height: 590px;
      display: block;
      position: absolute;
      top: 38px;
      left: -2px;
      background: url("../img/vedio.png") -254px 0 repeat-y;
      }
    .right-bar{
      width: 18px;
      height: 590px;
      display: block;
      position: absolute;
      top: 38px;
      right: -0px;
      background: url("../img/vedio.png") -272px 0 repeat-y;
    }
    .bottom-bar{
      width: 980px;
      height: 18px;
      display: block;
      margin-top: 1px;
      background: url("../img/topbar.png")50% -18px repeat-x;
    }
    .left-top-icon{
      width: 38px;
      height: 38px;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background: url("../img/vedio.png")no-repeat 0 0;
      background-position: -176px 0;
    }
    .right-top-icon{
      width: 38px;
      height: 38px;
      display: block;
      position: absolute;
      top: 0;
      right: 0px;
      background: url("../img/vedio.png")no-repeat 0 0;
      background-position: -214px 0;
    }
    .left-bottom-icon{
      width: 38px;
      height: 38px;
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      background: url("../img/vedio.png")no-repeat 0 0;
      background-position: -176px -38px;
      z-index: 1;
    }
    .right-bottom-icon{
      width: 38px;
      height: 38px;
      display: block;
      position: absolute;
      bottom: 0;
      right: 0px;
      background: url("../img/vedio.png")no-repeat 0 0;
      background-position: -214px -38px;
      z-index: 1;
    }
    object{
      display: block;
      width: 960px;
      height: 520px;
      margin: 0px auto 0;
    }
    #close-btn{
      display: block;
      width: 45px;
      height: 45px;
      position: absolute;
      top: 12px;
      right: 13px;
      background: url("../img/vedio.png")-2px -119px repeat-x;
    }
  }
  .box-model{
    width: 100%;
    height: 5000px;
    display: block;
    background: black;
    opacity: .7;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.pointer-icon{
  width: 70px;
  height: 70px;
  display: block;
  position: absolute;
  right: 60px;
  top: 1045px;
  background: url("../img/bar.png")no-repeat -184px -1366px;
  span{
    width: 70px;
    height: 70px;
    position: absolute;
    right: 0;
    top: -5px;
    background: url("../img/bar.png")no-repeat -320px -1364px;
    animation: point-roll 3s ease-in-out 2s infinite;
  }
  @keyframes point-roll {
    0% {transform: rotate(0deg);}

    33% {
      transform: rotate(-30deg);
    }
    73% {
      transform: rotate(360deg);}
    83% {
      transform: rotate(353deg);}
    92% {
      transform: rotate(362deg);}
    100% {
      transform: rotate(360deg);}
  }
}

#footer{
  display: block;
  height: 471px;
  background: url("../img/footer-bc.jpg")repeat-x;
  position: relative;
  .footer{
    width: 100%;
    height: 471px;
    display: block;
    background: url("../img/footer-bc2.jpg")no-repeat 50% 0;
    background-size:auto auto;
    .footer-top{
     width: 100%;
      height: auto;
      display: block;
      margin: 70px 0 70px;
      color: white;
      font-size: 14px;
      .footer-top-left{
       display: block;
        width: 45%;
        float: left;
        padding-left: 5%;
        a{
          display: block;
          height: auto;
          width: auto;
          float: left;
          margin: 10px 20px;
          span{
            width: 25px;
            height: 25px;
            display: inline-block;
            float: left;
            background: url('../img/small-icon.png')no-repeat 0 0;
          }
          b{
            display: inline-block;
            float: left;
            position: relative;
            font-weight: normal;
            padding-left: 8px;
          }
        }
      }
      .footer-top-right{
        display:block;
        width: 40%;

        float: right;
        padding-left: 10%;
        margin-top: 13px;

        span,a{
          display: block;
          float: left;
          color: white;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          margin-bottom:20px;
        }
        .nvidia{
         width: 95px;
          height: 26px;
          display:block;
          margin: 0 20px 0 20px;
        }
        .mail,.icon-more{
          width: 14px;
          height: 14px;
          border: 1px solid rgb(45, 23, 2);
          background-color:rgb(36, 17, 1);
          margin:5px 10px 0 0;
          position: relative;
          .line-h{
            width: 70%;
            height: 2px;
            display: block;
            position: absolute;
            top: 45%;
            left: 15%;
            background: rgb(172, 119, 31);
          }
          .line-s{
            height: 60%;
            width: 2px;
            display: block;
            position: absolute;
            left: 45%;
            top: 20%;
            background: rgb(172, 119, 31);
          }
        }
        .mail:hover .line-h,.mail:hover .line-s{
          background: white;
        }
      }
      a{
        color: white;
        text-decoration: none;
      }
      .triangle{
        border: 4px solid transparent;
        border-top-color: #ac771f;
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -2px 0 0 -4px;
      }
      .icon-more:hover .triangle{
        border-top-color: white;
      }
    }
    .footer-bottom{
      margin-left: 7%;
      display: block;
      width: 93%;
      .footer-bottom-left{
        display: block;
        width: 40%;
        height: auto;
        float: left;
        .logo-z{
          display: block;
          float: left;
          width: 160px;
          height: 70px;
          background: url("../img/blizzard.png")no-repeat 0 0;
        }
        .logo-w{
          display: block;
          float: left;
          margin-top: 20px;
          width: 130px;
          height: 50px;
          background: url("../img/wangnet.png")no-repeat 0 0;
        }
      }
      .footer-bottom-right{
        display: block;
        width: 60%;
        height: auto;
        float: left;
        .API{
          display: block;
          width: 100%;
          height: auto;
          color: white;
          font-size: 14px;
          a{
            margin-right:10px;
            color: white;
            font-size: 14px;
            text-align: right;
          }
        }
      }
    }
  }
}





::selection {
  color: rgb(255, 255, 255);
  text-shadow: none;
  background: rgb(219, 104, 0);
}